<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :number1 = 'num1'  :number2 = 'num2' v-on:num1change="num1change" v-on:num2change="num2change"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>propos:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <input type="text" :value="dnumber1" @input="num1input">
    <h2>{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <input type="text" :value="dnumber2" @input="num2input">

  </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            num1:0,
            num2:1,
        },
        methods: {
            num1change(value){
                this.num1 = parseInt(value)
            },
            num2change(value){
                this.num2 = parseInt(value)
            },
        },
        components:{
            cpn:{
                template:'#cpn',
                props:{
                    number1:Number,
                    number2:Number,
                },
                data(){
                    return {
                        dnumber1:this.number1,
                        dnumber2:this.number2,
                    }
                },
                methods:{
                    num1input(event){
                        // 1.将input中的value值赋值到dnumber1中
                        this.dnumber1 = event.target.value;
                        //2.发出一个事件，让父组件修改其num1值
                        this.$emit("num1change",this.dnumber1);
                        //修改dnumber2的值，让其变为dnumer的100倍
                        this.dnumber2 = this.dnumber1 * 100;
                        this.$emit("num2change", this.dnumber2)
                    },
                    num2input(event){
                        this.dnumber2 = event.target.value
                        this.$emit("num2change",this.dnumber2)

                        this.dnumber1 = this.dnumber2 /100;
                        this.$emit("num1change", this.dnumber1)
                    },
                }
            }
        }
    })
</script>
</body>
</html>